<%--
  Created by IntelliJ IDEA.
  User: chunyang
  Date: 2016/6/16
  Time: 21:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{box-sizing: border-box;-webkit-box-sizing: border-box;}
        body{margin: 0;}
        .single-form{padding: 20px;}
        .single-form .form-row{overflow: hidden;padding-bottom: 20px;}
        .single-form .form-row:last-child{padding-bottom: 0;}
        .single-form .form-row label{display: block;margin-bottom: 6px;font-size: 14px;}
        .single-form .form-row input,
        .single-form .form-row button{border-radius: 3px;line-height: 36px;border: 1px solid #ccc;font-size: 12px;padding: 0 5px;width: 100%;}
        .single-form .form-row button{background-color: #01a79a;color: #fff;font-size: 16px;border: none;}
        .single-form .form-code input{width: 70%;float: left;}
        .single-form .form-code a{background-color: #01a79a;width: 25%;overflow: hidden;line-height: 38px;text-align: center;border-radius: 3px;float: right;color: #fff;text-decoration: none;font-size: 14px;}
    </style>

</head>
<body>
<section class="single-form">
    <form action="${ctx}/pa2/create" method="post" id="form" onsubmit="return singleForm()">
        <input type="hidden" id="customerCode" value="${customerCode}" name="customerCode">
        <input type="hidden" id="callBack" value="${callBack}" name="callBack">
        <div class="form-row">
            <label for="name">姓名</label>
            <input type="text" id="name" name="name" value="" required=""/>
        </div>
        <div class="form-row">
            <label for="idCard">身份证</label>
            <input type="text" id="idCard" name="idCard" required=""/>
        </div>
        <div class="form-row">
            <label for="mobile">手机</label>
            <input type="text" id="mobile" name="mobile" required=""/>
        </div>
        <div class="form-row form-code">
            <label for="code">验证码</label>
            <input type="text" id="code" name="code" required=""/>
            <a href="javascript:sendVerCode();">获取</a>
        </div>
        <div class="form-row">
            <button type="submit">下一步</button>
        </div>
    </form>
</section>
<script>
    'use strict'
    var indetityReg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
    function singleForm(){
        var username = document.querySelector('#name').value, identity = document.querySelector('#idCard').value,verifyCode = document.querySelector('#code').value
        if(username == ''){
            alert('请输入您的姓名')
            return false
        }
        if(!indetityReg.test(identity)){
            alert('请输入正确的身份证号')
            return false
        }
        if(verifyCode == ''){
            alert('验证码不能为空')
            return false
        }
        return true;
    }

    function sendVerCode() {
        var mobile = $('#mobile').val();
        var url = "${ctx}/pa2/sendCode";
        $.post(url, {"mobile": mobile}, function (data) {
            alert(data.message);
        }, "json");
    }

</script>
</body>
</html>